<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝联想词</title>
    <style>
        body,
        ul,
        li,
        input {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .wrapper {
            width: 200px;
            margin: 50px;
        }

        .search {
            position: relative;
            width: 200px;
            height: 30px;
        }

        .search input {
            /* float: left; */
            position: absolute;
            left: 0;
            width: 150px;
            height: 30px;
            box-sizing: border-box;
            outline: none;
            border: 2px solid #FF5000;
        }

        .search .btn {
            /* float: right; */
            position: absolute;
            right: 0;
            width: 50px;
            height: 30px;
            background: #FF5000;
            border: none;
            border: 2px solid #FF5000;
            outline: none;
        }

        .wrapper ul {
            display: none;
            position: absolute;
            width: 198px;
            border: 1px solid #ccc;
            border-top: none;
        }

        .wrapper ul li {
            padding: 5px;
            /* font-size: 14px;
            color: #333;
            text-decoration: none; */
        }

        .wrapper ul li a {
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="search">
            <input id="text" type="text">
            <button class="btn">搜索</button>
            <!-- <input  class="btn" type="button" value="搜索"> -->
        </div>
        <ul>
            <!-- <li><a href="javascript:;">123</a></li>
            <li><a href="javascript:;">123</a></li>
            <li><a href="javascript:;">123</a></li>
            <li><a href="javascript:;">123</a></li> -->
        </ul>
    </div>

    <script>
        var oText = document.getElementById("text");
        var oUl = document.getElementsByTagName("ul")[0];
        console.log(oUl);

        // onkeydown只有当输入框中输入进字母时才触发,oninput在键盘按下时就会触发
        oText.oninput = function () {
            var val = oText.value;
            console.log(val);
            var oScript = document.createElement("script");
            // oScript.src = 'https://suggest.taobao.com/sug?q=' + val + '&callback=cbs';
            oScript.src = 'https://suggest.taobao.com/sug?code=utf-8&q=' + val + '&callback=cbs';
            document.body.appendChild(oScript);

            // 请求发送出去后，script就没用了
            oScript.remove();
        }
        function cbs(data) {
            console.log(data);
            var str = "";

            if (data.result.length > 0) {
                oUl.style.display = "block";

                data.result.forEach(function (ele, index) {
                    str += '<li><a href=""  target="_blank">' + ele[0] + '</a></li>';
                });

            } else {
                oUl.style.display = "none";
            }
            // console.log(str);
            oUl.innerHTML = str;
        }


    </script>
</body>

</html>